<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <style>
    html, body {
        height: 100%;
    }

    #graphContainer {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: url('./images/grid.gif');
        cursor: default;
    }
    </style>
</head>

<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer"></div>
</body>

<script>
const mxBasePath = '../static/mxgraph';
</script>

<script src="../mxClient.js"></script>
<script>
function main(container) {
  // 禁用鼠标右键
  mxEvent.disableContextMenu(container);
  const graph = new mxGraph(container);
  // 设置这个属性后节点之间才可以连接
  graph.setConnectable(true);
  // 开启区域选择
  new mxRubberband(graph);

  const parent = graph.getDefaultParent();
  graph.getModel().beginUpdate();
  try {
  const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
  const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
  const e1 = graph.insertEdge(parent, null, '30%', v1, v2);
  } finally {
      graph.getModel().endUpdate();
  }
}
</script>
</html>
